<template>
  <div class="container">
    <div class="main" v-show="!isShow">
      <div class="left-content">
        <div class="item-content" style="margin: 40px;">
          <div class="item-title">数字航道</div>
          <div class="flex" style="margin: 8px 28px 0px 28px;">
            <div class="item" style="width: 33%;margin-right: 0.5%;">
              <div class="top1">
                <div class="title">航道概况</div>
              </div>
              <div class="first-part">
                <div class="count-item">
                  <div class="name" style="font-size: 20px;">航道总里程<br>(公里)</div>
                  <div class="value" style="font-size: 40px;">{{ provinceWaterwayData.totalMileageOfWaterwayProvince || "--" }}</div>
                </div>
                <div class="count-item">
                  <div class="name">内河航道里程<br>(公里)</div>
                  <div class="value">{{ waterWayData.mileageOfInlandWaterway || "--" }}</div>
                </div>
                <div class="count-item">
                  <div class="name">内河高等级航道<br>里程(公里)</div>
                  <div class="value">{{ provinceSitData.highLevelMile || "--" }}</div>
                </div>                
              </div>
              <div class="second-part">
                <div class="sub-title">各辖区内河等级航道维护里程分布情况</div>
                <div id="first-chart" style="height: 300px;width: 100%;"></div>
              </div>
            </div>
            <div class="item" style="width: 33%;margin-right: 0.5%;">
              <div class="top1">
                <div class="title">航标总数</div>
              </div>
              <div class="first-part">
                <div class="other-count-item" style="width: 33.33%;">
                  <div class="name">航标总数(座)</div>
                  <div class="value">{{ navigationMarkData.beaconSum }}</div>
                </div>
                <div class="other-count-item" style="width: 33.33%;">
                  <div class="name">内河航标总数(座)</div>
                  <div class="value">{{ navigationMarkData.nhBeaconSum }}</div>
                </div>
                <div class="other-count-item" style="width: 33.33%;">
                  <div class="name">沿海航标总数(座)</div>
                  <div class="value">{{ navigationMarkData.yhBeaconSum }}</div>
                </div>
                <div class="other-count-item" style="width: 33.33%;">
                  <div class="name">遥测遥控航标<br>总数(座)</div>
                  <div class="value">{{ navigationMarkData.departmentRtuBeaconSum }}</div>
                </div>
                <div class="other-count-item" style="width: 33.33%;">
                  <div class="name">内河遥测遥<br>控航标总数(座)</div>
                  <div class="value">{{ navigationMarkData.departmentInlandRiverRtuBeaconSum }}</div>
                </div>
                <div class="other-count-item" style="width: 33.33%;">
                  <div class="name">沿海遥测遥<br>控航标总数(座)</div>
                  <div class="value">{{ navigationMarkData.departmentCoastalAreaRtuBeaconSum }}</div>
                </div>
              </div>
              <div class="second-part">
                <div class="sub-title">遥测遥控航标分布详情</div>
                <div id="fourth-chart" style="height: 280px;width: 100%;"></div>
              </div>
            </div>
            <div class="item" style="width: 33%;">
              <div class="top1">
                <div class="title">船舶概览</div>
                <el-radio-group v-model="shipRadio">
                  <el-radio-button label="工作船概览" value="工作船概览" />
                  <el-radio-button label="地市船舶" value="地市船舶" />                                
                </el-radio-group>
              </div>
              <div class="radio-content" v-show="shipRadio === '工作船概览'">
                <div class="ship-count">
                  <div class="ship-count-item">
                    <div class="name">船舶总量(艘)</div>
                    <div class="value">{{ shipSitData.cbNum }}</div>
                  </div>
                  <div class="ship-count-item">
                    <div class="name">正常使用(艘)</div>
                    <div class="value">{{ shipSitData.normal }}</div>
                  </div>
                </div>
                <div class="select-radio">
                  <el-radio-group v-model="shipTypeRadio">
                    <el-radio-button label="技术等级" value="技术等级" />
                    <el-radio-button label="船舶分类" value="船舶分类" />                                
                  </el-radio-group>                  
                </div>
                <div id="fourteenth-chart" style="height: 300px;width: 100%;" v-show="shipTypeRadio === '技术等级'"></div>
                <div id="fifteenth-chart" style="height: 300px;width: 750px;" v-show="shipTypeRadio === '船舶分类'"></div>
              </div>
              <div class="radio-content" v-show="shipRadio === '地市船舶'">
                <div id="sixteenth-chart" style="height: 450px;width: 750px;"></div>
              </div>
            </div>
          </div>
          <div class="flex" style="margin: 0px 28px;">
            <div class="item" style="margin-right: 2%;">
              <div class="top">
                <div class="title">桥梁信息</div>                
              </div>
              <div class="first-part">
                <div class="other-count-item">
                  <div class="name" style="font-size: 20px;">桥梁总数(座)</div>
                  <div class="value" style="font-size: 40px;">{{ bgAndWyData.totalBridge || "--" }}</div>
                </div>
                <div class="other-count-item">
                  <div class="name">高等级航道桥梁<br>(座)</div>
                  <div class="value">{{ bgAndWyData.bgHighLevel || "--" }}</div>
                </div>
                <div class="other-count-item">
                  <div class="name">等级航道桥梁<br>(座)</div>
                  <div class="value">{{ bgAndWyData.bgOtherLevel || "--" }}</div>
                </div>
                <div class="other-count-item">
                  <div class="name">高等级航道<br>(净空达标桥梁)</div>
                  <div class="value">{{ bgAndWyData.bgDabiaoHighLevel || "--" }}</div>
                </div>
                <div class="other-count-item">
                  <div class="name">高等级航道<br>(净空不达标桥梁)</div>
                  <div class="value">{{ bgAndWyData.bgNoDabiaoHighLevel || "--" }}</div>
                </div>
              </div>
              <div style="display: flex;">
                <div class="second-part" style="width: 50%;margin-right: 20px;">
                  <div class="sub-title">桥梁净高达标情况分布情况</div>
                  <div class="tips">
                    <div class="tips-item">
                      <div class="first-color"></div>
                      高等级航道达标桥梁占比
                    </div>
                    <div class="tips-item">
                      <div class="second-color"></div>
                      4-7级航道达标桥梁占比
                    </div>
                  </div>
                  <div class="tips">
                    <div class="tips-item">区域中心</div>
                    <div class="tips-item">桥梁占比</div>
                  </div>
                  <div class="progress-list">
                    <div class="progress-item" v-for="(item,index) in bgDbDistributeData" :key="index">
                      <div class="name">{{ item.bmPname }}</div>
                      <el-progress :percentage="item.highLevel" color="#78DFFF"></el-progress>
                      <el-progress :percentage="item.lowLevel" color="#FFC733"></el-progress>
                    </div>
                  </div>
                  <!-- <div id="second-chart" style="height: 320px;width: 100%;"></div> -->
                </div>
                <div class="second-part" style="width: 50%;">
                  <div class="sub-title" style="display: flex;justify-content: space-between;">
                    <div>桥梁净高实时值</div>
                    <el-select
                      v-model="depart"
                      placeholder="请选择" 
                      @change="departChange"                   
                      style="width: 100px"
                    >
                      <el-option
                        v-for="item in departData"
                        :key="item.name"
                        :label="item.name"
                        :value="item.name"
                      />
                    </el-select>
                  </div>
                  <el-table 
                    ref="myTable"
                    :data="bgHighHoleData" 
                    height="320"
                    @mouseover.native="clearScroll" 
                    @mouseleave.native="createScroll"
                    style="width: 100%;margin-top: 4px;" 
                   >
                    <el-table-column prop="bmPname" label="区域中心" width="100" />
                    <el-table-column prop="name" label="桥梁名称" width="260" />
                    <el-table-column prop="jgz" label="通航孔净高值" width="140" />                    
                  </el-table>
                </div>
              </div>              
            </div>
            <div class="item">
              <div class="top">
                <div class="title">船闸信息</div>
              </div>
              <div class="third-part">
                <div class="another-count" style="margin-right: 20px;">
                  <div class="another-count-item" style="width: 17%;">
                    <div class="img">
                      <img src="../assets/images/big-screen/beijiang-icon.png" alt="">
                    </div>
                  </div>
                  <div class="another-count-item" style="width: 32%;">
                    <div class="name">北江船闸数</div>
                    <div class="value">{{ beijiangData.totalNum }}</div>
                  </div>
                  <div class="another-count-item" style="width: 17%;">
                    <div class="name">Ⅲ级</div>
                    <div class="value">{{ beijiangData.three }}</div>
                  </div>
                  <div class="another-count-item" style="width: 17%;">
                    <div class="name">Ⅳ级</div>
                    <div class="value">{{ beijiangData.four }}</div>
                  </div>
                  <div class="another-count-item" style="width: 17%;">
                    <div class="name">Ⅴ级</div>
                    <div class="value">{{ beijiangData.five }}</div>
                  </div>
                </div>
                <div class="another-count">
                  <div class="another-count-item" style="width: 17%;">
                    <div class="img">
                      <img src="../assets/images/big-screen/lianjiang-icon.png" alt="">
                    </div>
                  </div>
                  <div class="another-count-item" style="width: 33%;">
                    <div class="name">连江船闸数</div>
                    <div class="value">{{ lianjiangData.totalNum }}</div>
                  </div>
                  <div class="another-count-item" style="width: 25%;">
                    <div class="name">Ⅳ级</div>
                    <div class="value">{{ lianjiangData.four }}</div>
                  </div>
                  <div class="another-count-item" style="width: 25%;">
                    <div class="name">Ⅵ级</div>
                    <div class="value">{{ lianjiangData.six }}</div>
                  </div>
                </div>
              </div>
              <div style="display: flex;">
                <div class="second-part" style="width: 50%;margin-right: 20px;">
                  <div class="sub-title" style="border-bottom: 0;">上月过闸船舶货物类型统计分析</div>
                  <div id="third-chart" style="height: 330px;width: 100%;"></div>
                </div>
                <div class="second-part" style="width: 50%;">
                  <div class="sub-title" style="border-bottom: 0;">变形监测统计分析</div>
                  <div class="list">
                    <div v-for="(item,index) in deformationData" :key="index" class="list-item">
                      <div class="item-tit">{{ item.name }}</div>
                      <div class="item-name">
                        <div>预警数</div>
                        <div>一级</div>
                        <div>二级</div>
                        <div>三级</div>
                      </div>
                      <div class="item-value">
                        <div>{{ item.totalnum }}</div>
                        <div>{{ item.onelevel }}</div>
                        <div>{{ item.twolevel }}</div>
                        <div>{{ item.threelevel }}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="middle-content">
        <OlArc ref="OlArcRef"></OlArc>
        <div class="special-topic">
          <div class="topic-active">数字水运</div>
          <div class="topic" @click="router.push({ path: '/bigScreenZhabaNew' })">闸坝智能调度与安全监测</div>
          <div class="topic"  @click="router.push({ path: '/bigScreenQiaoquNew' })">水上桥区管控</div>
          <div class="topic" @click="isShow = true">琼州海峡保畅通系统联动</div>
        </div>
        <div class="legend">
          <div class="legend-title" @click="isShowLegend = !isShowLegend">
            <div>图例</div>
            <img src="../assets/images/big-screen/icon-shouqi.png" v-if="!isShowLegend">
            <img src="../assets/images/big-screen/icon-zhankai.png" v-else>
          </div>
          <div v-show="isShowLegend">
            <div class="legend-info" style="border-bottom: 1px solid rgba(120,223,255,0.4);">
              <div class="legend-item" style="margin-bottom: 11px;">
                <img src="../assets/images/big-screen/map-one.png" alt="">
                <div class="name">省中心</div>
              </div>
              <div class="legend-item">
                <img src="../assets/images/big-screen/map-two.png" alt="">
                <div class="name">区域中心</div>
              </div>
            </div>
            <div class="legend-info" style="border-bottom: 1px solid rgba(120,223,255,0.4);">
              <div class="legend-item">
                <img src="../assets/images/big-screen/map-three.png" alt="">
                <div class="name">船闸</div>
              </div>            
            </div>
            <div class="legend-info" style="border-bottom: 1px solid rgba(120,223,255,0.4);">
              <div class="legend-item">
                <img src="../assets/images/big-screen/map-four.png" alt="">
                <div class="name">桥梁</div>
              </div>
            </div>
            <div class="legend-info" style="border-bottom: 1px solid rgba(120,223,255,0.4);">
              <div class="legend-item">
                <img src="../assets/images/big-screen/map-five.png" alt="">
                <div class="name">国际枢纽港</div>
              </div>
              <div class="legend-item">
                <img src="../assets/images/big-screen/map-six.png" alt="">
                <div class="name">沿海主要港口</div>
              </div>
              <div class="legend-item">
                <img src="../assets/images/big-screen/map-seven.png" alt="">
                <div class="name">沿海重要港口</div>
              </div>
              <div class="legend-item">
                <img src="../assets/images/big-screen/map-eight.png" alt="">
                <div class="name">内河主要港口</div>
              </div>
              <div class="legend-item">
                <img src="../assets/images/big-screen/map-nine.png" alt="">
                <div class="name">内河重要港口</div>
              </div>
            </div>
            <div class="legend-info" style="border-bottom: 1px solid rgba(120,223,255,0.4);">
              <div class="legend-item">
                <img src="../assets/images/big-screen/ais.png" alt="">
                <div class="name">AIS船舶</div>
              </div>
            </div>
          </div>
        </div>
        <div class="filter">
          <div class="filter-title" @click="isShowFilter = !isShowFilter">
            <div>筛选</div>
            <img src="../assets/images/big-screen/icon-shouqi.png" v-if="!isShowFilter">
            <img src="../assets/images/big-screen/icon-zhankai.png" v-else>
          </div>
          <div v-show="isShowFilter">
            <div class="filter-item">
              <el-checkbox
                v-model="checkAll1"
                :indeterminate="isIndeterminate1"
                @change="handleCheckAllChange1"
                style="margin-bottom: 8px;"
              >
                区域中心
              </el-checkbox>
              <el-checkbox-group
                v-model="checkedValues1"
                @change="handleCheckedChange1"
                style="display: flex;flex-direction: column;margin-left: 20px;height: 200px;overflow-y: auto;"
              >
                <el-checkbox
                  v-for="item in options1"
                  :key="item"
                  :label="item"
                  :value="item"
                  style="margin-bottom: 12px;"
                >
                  {{ item }}
                </el-checkbox>
              </el-checkbox-group>
            </div>
            <div class="filter-item">
              <el-checkbox
                v-model="checkAll2"
                :indeterminate="isIndeterminate2"
                @change="handleCheckAllChange2"
              >
                流域
              </el-checkbox>
              <el-checkbox-group
                v-model="checkedValues2"
                @change="handleCheckedChange2"
                style="display: flex;flex-direction: column;margin-left: 20px;"
              >
                <el-checkbox
                  v-for="item in options2"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                  {{ item }}
                </el-checkbox>
              </el-checkbox-group>
            </div>
            <div class="filter-item">
              <el-checkbox
                v-model="checkAll3"
                :indeterminate="isIndeterminate3"
                @change="handleCheckAllChange3"
              >
                等级航道
              </el-checkbox>
              <el-checkbox-group
                v-model="checkedValues3"
                @change="handleCheckedChange3"
                style="display: flex;flex-direction: column;margin-left: 20px;"
              >
                <el-checkbox
                  v-for="item in options3"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                  {{ item }}
                </el-checkbox>
              </el-checkbox-group>
            </div>
            <div class="filter-item">
              <el-checkbox
                v-model="qiaoliang"   
                @change="handleFilter"           
              >
                桥梁
              </el-checkbox>
            </div>
            <div class="filter-item">
              <el-checkbox
                v-model="chuanzha"   
                @change="handleFilter"           
              >
                船闸
              </el-checkbox>
            </div>
            <div class="filter-item">
              <el-checkbox
                v-model="gangkou"   
                @change="handleFilter"           
              >
                港口
              </el-checkbox>
            </div>
            <div class="filter-item">
              <el-checkbox
                v-model="ais"   
                @change="handleFilter"           
              >
                AIS船舶
              </el-checkbox>
            </div>
          </div>
        </div>
      </div>
      <div class="right-content">
        <div class="item-content" style="height: 627px;margin: 42px 40px 28px 40px;">
          <div class="item-title">数字航运</div>
          <div class="flex">
            <div class="item" style="width: 32%;margin: 8px 20px 28px 28px;">
              <div class="top1">
                <div class="tit">水路运输企业</div>
              </div>
              <div class="count-one">
                <div class="left-part">
                  <div class="name">水路运输企业(家)</div>
                  <div class="value">{{ waterWayCompanyData.totalCom }}</div>
                  <img src="../assets/images/big-screen/base-bg.png" alt="" class="base-bg">
                </div>
                <div class="right-part">
                  <div class="right-part-item">
                    <div class="val1">国内航运经营人</div>
                    <div class="val2">{{ waterWayCompanyData.gnhy }}</div>
                    <div class="val3">
                      同比：{{ waterWayCompanyData.gnhyTb }}%
                      <img src="../assets/images/big-screen/down-sanjiao.png" alt="">
                    </div>
                  </div>
                  <div class="right-part-item">
                    <div class="val1">港澳航运经营人</div>
                    <div class="val2">{{ waterWayCompanyData.gahy }}</div>
                    <div class="val3">
                      同比：{{ waterWayCompanyData.gahyTb }}%
                      <img src="../assets/images/big-screen/down-sanjiao.png" alt="">
                    </div>
                  </div>
                  <div class="right-part-item">
                    <div class="val1">国际航运经营人</div>
                    <div class="val2">{{ waterWayCompanyData.gjhy }}</div>
                    <div class="val3">
                      同比：{{ waterWayCompanyData.gjhyTb }}%
                      <img src="../assets/images/big-screen/down-sanjiao.png" alt="">
                    </div>
                  </div>
                  <div class="right-part-item">
                    <div class="val1">港澳兼国内</div>
                    <div class="val2">{{ waterWayCompanyData.gajgn }}</div>
                    <div class="val3">
                      同比：{{ waterWayCompanyData.gajgnTb }}%
                      <img src="../assets/images/big-screen/down-sanjiao.png" alt="">
                    </div>
                  </div>
                  <div class="right-part-item">
                    <div class="val1">国际兼国内</div>
                    <div class="val2">{{ waterWayCompanyData.gjjgn }}</div>
                    <div class="val3">同比：{{ waterWayCompanyData.gjjgnTb }}%</div>
                  </div>
                  <div class="right-part-item">
                    <div class="val1">国际兼港澳兼国内</div>
                    <div class="val2">{{ waterWayCompanyData.gjjgajgn }}</div>
                    <div class="val3">
                      同比：{{ waterWayCompanyData.gjjgajgnTb }}%
                      <img src="../assets/images/big-screen/down-sanjiao.png" alt="">
                    </div>
                  </div>
                </div>
              </div>
              <div class="top1">
                <div class="tit">水运运力情况</div>
                <el-radio-group v-model="radio">
                  <el-radio-button label="客运船舶情况" value="客运船舶情况" />
                  <el-radio-button label="货运船舶情况" value="货运船舶情况" />                 
                </el-radio-group>
              </div> 
              <div class="details" v-show="radio === '客运船舶情况'">
                <div class="val1">载客量(位)</div>
                <div class="val2">{{ waterCapacityData.loadPassenger }}</div>
                <div class="val3">
                  同比：{{ waterCapacityData.loadPassengerTb }}%
                  <img src="../assets/images/big-screen/down-sanjiao.png" alt="">
                </div>
              </div>    
              <div class="details" v-show="radio === '货运船舶情况'">
                <div class="val1">载重量(万吨)</div>
                <div class="val2">{{ waterCapacityData.loadGoods }}</div>
                <div class="val3">
                  同比：{{ waterCapacityData.loadGoodsTb }}%
                  <img src="../assets/images/big-screen/down-sanjiao.png" alt="">
                </div>
              </div> 
              <div id="fifth-chart" style="height: 220px;width: 650px;" v-show="radio === '客运船舶情况'"></div>  
              <div id="sixth-chart" style="height: 220px;width: 650px;" v-show="radio === '货运船舶情况'"></div>       
            </div>
            <div class="item" style="width: 68%;margin: 8px 28px 28px 0px;">
              <div class="top">
                <div class="tit">水运运量情况</div>
              </div>
              <div class="count-two">
                <div class="count-two-part">
                  <div class="title">客运量情况</div>
                  <div class="count-two-list">
                    <div class="count-two-item" style="width: 46%;">
                      <div class="img-part">
                        <img src="../assets/images/big-screen/count-one-icon.png" alt="">
                      </div>
                      <div class="count-part">
                        <div class="val1">水路客运量(万人)</div>
                        <div class="val2">{{ waterTransportData?.passenger?.waterPassenger }}</div>
                        <div class="val3">
                          累计量同比:{{ waterTransportData?.passenger?.waterPasgTb }}%
                          <img src="../assets/images/big-screen/top-sanjiao.png" alt="">
                        </div>
                      </div>
                    </div>
                    <div class="count-two-item" style="width: 54%;">
                      <div class="img-part">
                        <img src="../assets/images/big-screen/count-two-icon.png" alt="">
                      </div>
                      <div class="count-part">
                        <div class="val1">水路旅客周转量(万人公里)</div>
                        <div class="val2">{{ waterTransportData?.passenger?.waterPasgTrans }}</div>
                        <div class="val3">
                          累计量同比:{{ waterTransportData?.passenger?.waterPasgTransTb }}%
                          <img src="../assets/images/big-screen/top-sanjiao.png" alt="">
                        </div>
                      </div>
                    </div>
                  </div>
                  <div id="seventh-chart" style="height: 340px;width: 100%;"></div> 
                </div>
                <div class="count-two-part">
                  <div class="title">货运量情况</div>
                  <div class="count-two-list">
                    <div class="count-two-item" style="width: 46%;">
                      <div class="img-part">
                        <img src="../assets/images/big-screen/count-three-icon.png" alt="">
                      </div>
                      <div class="count-part">
                        <div class="val1">水路货运量(亿吨)</div>
                        <div class="val2">{{ waterTransportData?.goods?.waterGoods }}</div>
                        <div class="val3">
                          累计量同比:{{ waterTransportData?.goods?.waterGoodsTb }}%
                          <img src="../assets/images/big-screen/top-sanjiao.png" alt="">
                        </div>
                      </div>
                    </div>
                    <div class="count-two-item" style="width: 56%;">
                      <div class="img-part">
                        <img src="../assets/images/big-screen/count-four-icon.png" alt="">
                      </div>
                      <div class="count-part">
                        <div class="val1">水路旅客周转量(亿吨公里)</div>
                        <div class="val2">{{ waterTransportData?.goods?.waterGoodsTrans }}</div>
                        <div class="val3">
                          累计量同比:{{ waterTransportData?.goods?.waterGoodsTransTb }}%
                          <img src="../assets/images/big-screen/top-sanjiao.png" alt="">
                        </div>
                      </div>
                    </div>
                  </div>
                  <div id="eighth-chart" style="height: 340px;width: 100%;"></div> 
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="item-content" style="height: 425px;margin: 0px 40px 40px 40px;">
          <div class="item-title">数字港口</div>
          <div class="flex">
            <div class="item" style="width: 35%;margin: 8px 20px 28px 28px;">
              <div class="top1" style="margin-bottom: 20px;">
                <div class="tit">港口信息</div>
                <el-radio-group v-model="radio1">
                  <el-radio-button label="港口企业" value="港口企业" />
                  <!-- <el-radio-button label="港口机械设施" value="港口机械设施" /> -->
                  <el-radio-button label="泊位" value="泊位" />
                  <!-- <el-radio-button label="岸线使用情况" value="岸线使用情况" /> -->
                </el-radio-group>
              </div>
              <div class="tabs-content">
                <div style="display: flex;" v-show="radio1 === '港口企业'">
                  <div id="ninth-chart" style="height: 340px;width: 50%;"></div> 
                  <div id="tenth-chart" style="height: 340px;width: 50%;"></div> 
                </div>
                <div v-show="radio1 === '港口机械设施'">
                  <div id="eleventh-chart" style="height: 340px;width: 500px;"></div> 
                </div>
                <div v-show="radio1 === '泊位'">
                  <div class="info-item">
                    <div class="left-info">
                      <div class="name">泊位(个)</div>
                      <div class="value">{{ berthLineData.newBerth }}</div>
                      <img src="../assets/images/big-screen/count-five.png" alt="">
                    </div>
                    <div class="raight-info">
                      <div class="val-item">
                        <div class="val1">1-5万吨级</div>
                        <div class="val2">{{ berthLineData.tons15 }}</div>
                      </div>
                      <div class="val-item">
                        <div class="val1">5-10万吨级</div>
                        <div class="val2">{{ berthLineData.tons510 }}</div>
                      </div>
                      <div class="val-item">
                        <div class="val1">10万吨级以上</div>
                        <div class="val2">{{ berthLineData.tons10 }}</div>
                      </div>
                    </div>
                  </div>
                  <!-- <div class="info-item" style="margin: 8px 0px 16px 0px;">
                    <div class="left-info">
                      <div class="name">沿海泊位(个)</div>
                      <div class="value">{{ berthLineData.coastalBerth }}</div>
                      <img src="../assets/images/big-screen/count-five.png" alt="">
                    </div>
                    <div class="raight-info">
                      <div class="val-item">
                        <div class="val1">万吨级</div>
                        <div class="val2">{{ berthLineData.cTonW }}</div>
                      </div>
                      <div class="val-item">
                        <div class="val1">十万吨级</div>
                        <div class="val2">{{ berthLineData.cton10w }}</div>
                      </div>
                      <div class="val-item">
                        <div class="val1">三十万吨级</div>
                        <div class="val2">{{ berthLineData.cton30w }}</div>
                      </div>
                    </div>
                  </div>
                  <div class="info-item">
                    <div class="left-info">
                      <div class="name">内河泊位(个)</div>
                      <div class="value">{{ berthLineData.inlandRiverBerth }}</div>
                      <img src="../assets/images/big-screen/count-six.png" alt="">
                    </div>
                    <div class="raight-info">
                      <div class="val-item">
                        <div class="val1">三千吨级</div>
                        <div class="val2">{{ berthLineData.irTon3000 }}</div>
                      </div>
                      <div class="val-item">
                        <div class="val1">五千吨级</div>
                        <div class="val2">{{ berthLineData.irTon5000 }}</div>
                      </div>
                    </div>
                  </div> -->
                </div> 
                <div v-show="radio1 === '岸线使用情况'">
                  <div class="info-item" style="margin: 8px 0px 16px 0px;">
                    <div class="left-info1">
                      <img src="../assets/images/big-screen/count-seven.png" alt="">
                    </div>
                    <div class="raight-info1">                      
                      <div class="name">已利用岸线长度(千米)</div>
                      <div class="value">{{ berthLineData.utilzedShoreline }}</div>
                    </div>
                  </div>
                </div>               
              </div>
            </div>
            <div class="item" style="width: 65%;margin: 8px 28px 28px 0px;">
              <div class="top">
                <div class="tit">港口吞吐情况</div>
                <el-radio-group v-model="radio2">
                  <el-radio-button label="货物吞吐情况" value="货物吞吐情况" />
                  <el-radio-button label="集装箱吞吐情况" value="集装箱吞吐情况" />                 
                </el-radio-group>
              </div>
              <div class="count-three" v-show="radio2 === '货物吞吐情况'">
                <div class="count-three-part" style="width: 35%;">
                  <div class="title">货物吞吐情况</div>
                  <div class="count-three-info">
                    <div class="left-info">
                      <div class="value">{{ goodsSitData.goodsNum }}</div>
                      <div class="unit">(万吨)</div>
                      <img src="../assets/images/big-screen/base-other-bg.png" alt="">
                      <div class="name">货物吞吐量</div>
                    </div>
                    <div class="right-info">
                      <div class="val-item">
                        <div class="name">外贸货物<br>(万吨)</div>
                        <div class="value">{{ goodsSitData.wmGoods }}</div>
                      </div>
                      <div class="val-item">
                        <div class="name">内贸货物<br>(万吨)</div>
                        <div class="value">{{ goodsSitData.nmGoods }}</div>
                      </div>
                      <div class="val-item">
                        <div class="name">沿海货物<br>(万吨)</div>
                        <div class="value">{{ goodsSitData.yhGoods }}</div>
                      </div>
                      <div class="val-item">
                        <div class="name">内河货物<br>(万吨)</div>
                        <div class="value">{{ goodsSitData.nhGoods }}</div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="count-three-part" style="width: 65%;">
                  <div class="title">货物吞吐量趋势</div>
                  <div id="twelfth-chart" style="height: 270px;width: 100%;"></div> 
                </div>
              </div>
              <div class="count-three" v-show="radio2 === '集装箱吞吐情况'">
                <div class="count-three-part" style="width: 35%;">
                  <div class="title">集装箱吞吐情况</div>
                  <div class="count-three-info">
                    <div class="left-info">
                      <div class="value">{{ goodsSitData.boxNum }}</div>
                      <div class="unit">(万吨)</div>
                      <img src="../assets/images/big-screen/base-other-bg.png" alt="">
                      <div class="name">集装箱吞吐量</div>
                    </div>
                    <div class="right-info1">
                      <div class="val-item">
                        <div class="name">外贸集装箱(万吨)</div>
                        <div class="value">{{ goodsSitData.wmBoxNum }}</div>
                      </div>
                      <div class="val-item">
                        <div class="name">内贸集装箱(万吨)</div>
                        <div class="value">{{ goodsSitData.nmBoxNum }}</div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="count-three-part" style="width: 65%;">
                  <div class="title">集装箱吞吐量趋势</div>
                  <div id="thirteenth-chart" style="height: 270px;width: 860px;"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="my-iframe" v-if="isShow">
      <iframe 
        src="http://210.76.76.41/digital-port/big-screen/main/#/QZHX?token=e49f977c-4203-464a-92d1-50de3c1f34a5" 
        width="5760" 
        height="1200"
      ></iframe>
      <div class="close-btn" @click="isShow = false">返回</div>
    </div> 
  </div>
</template>

<script setup>
  import { ref, onMounted, onUnmounted, nextTick } from 'vue';
  import { useRouter } from "vue-router";
  const router = useRouter();

  //引入Echarts
  import * as echarts from 'echarts/core';
  import { TooltipComponent, LegendComponent, GridComponent, DataZoomComponent, GraphicComponent } from 'echarts/components';
  import { PieChart, BarChart, LineChart } from 'echarts/charts';
  import { CanvasRenderer } from 'echarts/renderers';
  echarts.use([TooltipComponent, LegendComponent, GridComponent, DataZoomComponent, GraphicComponent, PieChart, BarChart, LineChart, CanvasRenderer]);

  //引入接口
  import {     
    //航道概况
    getProvinceWaterwayData, 
    provinceSit,
    getWaterwayTotalNum,
    getnhdjhdDetail,
    //航标总数
    beaconSituationDetail,   
    rtuBeaconChart, 
  } from "@/bridge-h5/utils/apis";
  import {
    nhdjhdDetail,
    //桥梁信息
    getBgAndWy,
    bgDistribute,
    bgDbDistribute,
    getDepart,
    bgHighHole,
    //数字航运
    waterWayCompany,
    waterTransport,
    waterCapacity,
    //数字港口
    portCompany,
    portMachine,
    berthLine,
    goodsSit,
    //船舶概览
    shipSit,
  } from "@/bridge-h5/utils/bridgeAreaControlApi";
  import {
    //船闸信息
    screenMapData,
    newWater,
    goodsAnalysis,
    defAlySmall,
  } from "@/bridge-h5/utils/myapi";

  //地图
  import OlArc from "../components/olArcLargeSizeScreen.vue";
  const OlArcRef = ref(null); 

  import chartBg from '../assets/images/big-screen/chart-bg.png';

  //航道概况
  const provinceWaterwayData = ref({});
  const getProvinceWaterwayDataFn = () => {
    getProvinceWaterwayData().then((res) => {
      if(res.code === 200 && res.data.length){
        provinceWaterwayData.value = res.data[0];
      }      
    });
  };
  const provinceSitData = ref({});
  const provinceSitFn = () => {
    provinceSit().then((res) => {
      if(res.code === 200){
        provinceSitData.value = res.data;
      }
    });
  };
  const waterWayData = ref({});
  const getWaterwayTotalNumFn = () => {
    getWaterwayTotalNum().then((res) => {
      if (res.code === 200 && res.data) {
        waterWayData.value = res.data[0];
      }
    });
  };
  const nhdjhdDetailData = ref([]);
  const regionalCenter = ref([]);
  const levelOne = ref([]);
  const levelTwo = ref([]);

  const getnhdjhdDetailFn = () => {
    nhdjhdDetail().then((res) => {
      if (res.code === 200 && res.data) {
        let resData = res.data;
        let obj = {};
        resData.forEach((el,index) => {
          regionalCenter.value.push(el.region);   
          levelOne.value.push(el.highLevel);
          levelTwo.value.push(el.otherLevel);
        });
        resData.unshift(obj);
        nhdjhdDetailData.value = resData;

        initFirstChart();
      }
    });
  };
  const initFirstChart = () => {
    let firstChart = echarts.getInstanceByDom(document.getElementById("first-chart"));
    if(firstChart != null && firstChart != "" && firstChart != undefined){
      firstChart.dispose();
    }
    firstChart = echarts.init(document.getElementById('first-chart'));
    let option;
    option = {
      tooltip: {
        // trigger: "axis",
        trigger: 'item',
        axisPointer: {
          type: "shadow",
        },
        confine: true, //限制在图表区域内
      },
      legend: {
        // itemWidth: 6, // 设置图例项的宽度
        // itemHeight: 6, // 设置图例项的高度
        textStyle: {
          fontSize: "16px",
          color: "#FFFFFF",
        },  
        itemGap: 6,
        // icon: "circle", //图例设置成圆形
      },
      grid: {
        top: "20%",
        left: "5%",
        right: "17%",
        bottom: "5%",
        containLabel: true,
      },
      dataZoom: [
        {
          show: false,
          type: "inside",
          // maxValueSpan: 12,
          startValue: 0,
          endValue: 7,
          zoomLock: false,
        },
      ],
      xAxis: [
        {
          type: "category",
          name: "区域中心",
          nameTextStyle: {
            fontWeight: "500",
            fontSize: "16px",
            color: "#FFFFFF",
          },
          data: regionalCenter.value,
          axisTick: {
            alignWithLabel: true, //控制刻度线是否与刻度标签对齐
            show: false, //是否显示刻度线
          },
          axisLabel: {
            interval:0, 
            color: "#FFFFFF",
            fontSize: "16px",
          },
          axisPointer: {
            show: true,
            type: 'none',
            label: {
              show: false,
            },
          },  
        },
      ],
      yAxis: [
        {
          type: "value",
          name: "维护里程（km）",
          nameTextStyle: {
            fontWeight: "500",
            fontSize: "16px",
            color: "#FFFFFF",
          },
          nameGap: 15,
          axisLabel: {
            interval:0, 
            color: "#FFFFFF",
            fontSize: "16px",
          },
          splitLine: {
            show: true,
            lineStyle:{
              // type:'dashed',
              color: 'rgba(255,255,255,0.2)'
            }
          } 
        },
      ],
      series: [
        {
          name: "内河高等级航道里程",
          type: "bar",
          emphasis: {
            focus: "series",
          },
          stack: "Ad",
          barWidth: '15%',
          color: "#78DFFF",
          data: levelOne.value,
        },
        {
          name: "内河4-7级航道里程",
          type: "bar",
          emphasis: {
            focus: "series",
          },
          stack: "Ad",
          barWidth: '15%',
          color: "#FFC733",
          data: levelTwo.value,
        },        
      ],
    };

    option && firstChart.setOption(option);
  };

  //航标总数
  const navigationMarkData = ref({});
  const beaconSituationDetailFn = () => {
    beaconSituationDetail().then((res) => {    
      if(res.code === 200 && res.data.length){
        navigationMarkData.value = res.data[0];
      }
    });
  };
  const xAxisSecondData = ref([]);
  const seriesSecondData = ref([]);
  const rtuBeaconChartFn = () => {
    rtuBeaconChart().then((res) => {
      if(res.code === 200 && res.data.length){
        res.data.forEach((item) => {
          xAxisSecondData.value.push(item.region);
          seriesSecondData.value.push(item.rtuBeacon);
        });
        initFourthChart();
      }
    });
  };
  const initFourthChart = () => {
    let secondChart = echarts.getInstanceByDom(document.getElementById("fourth-chart"));
    if (secondChart == null) {
      secondChart = echarts.init(document.getElementById("fourth-chart"));
    }
    let option;
    option = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
        confine: true, //限制在图表区域内
      },
      grid: {
        top: "15%",
        left: "5%",
        right: "17%",
        bottom: "10%",
        containLabel: true,
      },
      dataZoom: [
        {
          show: false,
          type: "inside",
          zoomLock: false,
        },
      ],
      xAxis: [
        {
          type: "category",
          data: xAxisSecondData.value,
          name: "区域中心",
          axisTick: {
            alignWithLabel: true, //控制刻度线是否与刻度标签对齐
            show: false, //是否显示刻度线
          },
          nameTextStyle: {
            fontWeight: "500",
            fontSize: "16px",
            color: "#FFFFFF",
          },
          axisLabel: {
            color: "#FFFFFF",
            fontSize: "16px",
          },
        },  
      ],
      yAxis: [
        {
          type: "value",
          name: '座数', 
          nameTextStyle: {
            fontWeight: "500",
            fontSize: "16px",
            color: "#FFFFFF",
            padding: [0,30,0,0]
          },
          axisLabel: {
            color: "#FFFFFF",
            fontSize: "16px",
          },
          splitLine: {
            show: true,
            lineStyle:{
              // type:'dashed',
              color: 'rgba(255,255,255,0.2)'
            }
          }   
        },
      ],
      series: [
        {
          name: "遥测遥控航标数",
          data: seriesSecondData.value,
          type: "bar",
          barWidth: '15%',
          label: {
            show: true,
            position: "top",
            color: "#FFFFFF"
          },
          itemStyle: {
            color: '#78DFFF'
          },
        },
      ],
    };

    option && secondChart.setOption(option);
  };

  //船舶概览
  const shipRadio = ref('工作船概览');
  const shipSitData = ref({});
  const shipTypeRadio = ref('技术等级');
  const shipSitFn = () => {
    shipSit().then((res) => {
      if(res.code === 200){
        shipSitData.value = res.data;
        let colorData = [
          '#78DFFF','#9AD4EF','#309CFF','#2B679D','#5057FD','#8083D8','#5AF5D5','#A6E7D9','#55FE5C','#9CDB9F',
          '#FFC733','#FFE6A5','#FE762A','#F9B793','#E33F3F','#F48787','#ED44F0','#F5ABF6','#41616A','#ADCDD6',
        ]; 
        let levelData = [];
        res.data.jsLevel.forEach((item,index) => {
          levelData.push({
            name: res.data.jsLevelType[index],
            value: item,
            itemStyle: { 
              color: colorData[index]
            }
          });
        });
        initFourteenthChart(levelData);
        let shipData = [];
        res.data.shipNum.forEach((item,index) => {
          shipData.push({
            name: res.data.shipType[index],
            value: item,
            itemStyle: { 
              color: colorData[index]
            }
          });
        });
        initFifteenthChart(shipData);
        let xData = [];
        let sData = [];
        res.data.dishiShip.forEach((item) => {
          xData.push(item.cityName);
          sData.push(item.shipNum);
        });
        initSixteenthChart(xData,sData);
      }
    });
  };
  const initFourteenthChart = (levelData) => {
    nextTick(() => {
      let pieChart = echarts.getInstanceByDom(document.getElementById("fourteenth-chart"));
      if(pieChart != null && pieChart != "" && pieChart != undefined){
        pieChart.dispose();
      }
      pieChart = echarts.init(document.getElementById('fourteenth-chart'));
      let option = {            
        graphic: {
          type: 'image',
          id: 'background',
          left: 210,
          top: 20,
          z: -10, // 确保背景图在底层
          bounding: 'raw',
          origin: [200, 200], // 图片的中心位置
          style: {
            image: chartBg, // 背景图片的URL
            width: 260, // 背景图片的宽度
            height: 260, // 背景图片的高度
          }
        },
        legend: {   
          type: 'scroll', 
          textStyle: {
            fontSize: "16px",
            color: "#FFFFFF",
          },    
          pageIconColor: '#FFFFFF', // 翻页按钮的颜色
          pageIconInactiveColor: '#2f4554', // 翻页按钮不激活时（即翻页到头时）的颜色
          pageTextStyle: { // 图例页信息的文字样式
            color: '#FFFFFF'
          },      
        },    
        tooltip: {
          trigger: 'item',
          confine: true, //限制在图表区域内   
        },     
        series: [
          {
            type: 'pie',
            radius: ['60%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,          
            },
            labelLine: {
              show: true, //标签连接线
            },  
            data: levelData
          }
        ],          
      };
      option && pieChart.setOption(option);
   
    }); 
  };
  const initFifteenthChart = (shipData) => {
    nextTick(() => {
      let pieChart = echarts.getInstanceByDom(document.getElementById("fifteenth-chart"));
      if(pieChart != null && pieChart != "" && pieChart != undefined){
        pieChart.dispose();
      }
      pieChart = echarts.init(document.getElementById('fifteenth-chart'));
      let option = {            
        graphic: {
          type: 'image',
          id: 'background',
          left: 245,
          top: 20,
          z: -10, // 确保背景图在底层
          bounding: 'raw',
          origin: [200, 200], // 图片的中心位置
          style: {
            image: chartBg, // 背景图片的URL
            width: 260, // 背景图片的宽度
            height: 260, // 背景图片的高度
          }
        },
        legend: {   
          type: 'scroll', 
          textStyle: {
            fontSize: "16px",
            color: "#FFFFFF",
          },    
          pageIconColor: '#FFFFFF', // 翻页按钮的颜色
          pageIconInactiveColor: '#2f4554', // 翻页按钮不激活时（即翻页到头时）的颜色
          pageTextStyle: { // 图例页信息的文字样式
            color: '#FFFFFF'
          },      
        },    
        tooltip: {
          trigger: 'item',
          confine: true, //限制在图表区域内   
        },     
        series: [
          {
            type: 'pie',
            radius: ['60%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,          
            },
            labelLine: {
              show: true, //标签连接线
            },  
            data: shipData
          }
        ],          
      };
      option && pieChart.setOption(option);
   
    }); 
  };
  const initSixteenthChart = (xData,sData) => {
    nextTick(() => {
      let sixteenthChart = echarts.getInstanceByDom(document.getElementById('sixteenth-chart'));
      if(sixteenthChart == null){
        sixteenthChart = echarts.init(document.getElementById('sixteenth-chart'));
      }   
      var option;
      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          confine: true, //限制在图表区域内
        },
        grid: {
          top: '10%',
          left: '5%',
          right: '17%',
          bottom: '5%',
          containLabel: true
        },
        dataZoom: [
          {
            show: false,
            type: "inside",
            // maxValueSpan: 10,
            // startValue: 0,
            // endValue: 7,
            zoomLock: false,
          },
        ],
        xAxis: [
          {
            type: 'category',
            data: xData,
            name: '区域中心', 
            axisTick: {
              alignWithLabel: true, //控制刻度线是否与刻度标签对齐
              show: false, //是否显示刻度线
            },
            nameTextStyle: {
              fontWeight: "500",
              fontSize: "16px",
              color: "#FFFFFF",
            },   
            axisLabel: {
              color: "#FFFFFF",
              fontSize: "16px",
            },
          }
        ],
        yAxis: [
          {
            type: 'value', 
            name: '单位：艘',
            nameTextStyle: {
              fontWeight: "500",
              fontSize: "16px",
              color: "#FFFFFF",
              padding: [0,50,0,0]
            },
            nameGap: 15,     
            axisLabel: {
              color: "#FFFFFF",
              fontSize: "16px",
            },  
            splitLine: {
              show: true,
              lineStyle:{
                // type:'dashed',
                color: 'rgba(255,255,255,0.2)'
              }
            }, 
          }
        ],
        series: [
          {
            name: "船舶数量",
            data: sData,
            type: 'bar',
            barWidth: '15%',
            label: {
              show: true,
              position: "top",
              color: "#FFFFFF"
            },
            itemStyle: {
              color: '#78DFFF'
            },
          }
        ]
      };
      option && sixteenthChart.setOption(option);
    });
    
  };
  //桥梁信息
  const bgAndWyData = ref({});
  const getBgAndWyFn = () => {
    getBgAndWy().then((res) => {
      if (res.code === 200 && res.data) {
        bgAndWyData.value = res.data;
      }
    })
  };
  const bgDbDistributeData = ref([]);
  const bgDbDistributeFn = () => {
    bgDbDistribute().then((res) => {
      if(res.code === 200){
        bgDbDistributeData.value = res.data;
      }
    });
  };
  const depart = ref('');
  const departData = ref([]);
  const getDepartFn = () => {
    getDepart().then((res) => {
      if(res.code === 200){
        // depart.value = res.data[0].name;
        depart.value = '广州';
        departData.value = res.data;
        bgHighHoleFn();
      }
    });
  };
  const departChange = () => {
    bgHighHoleFn();
  };
  const bgHighHoleData = ref([]);
  const bgHighHoleFn = () => {
    bgHighHole({
      bmPname: depart.value
    }).then((res) => {
      if(res.code === 200){
        bgHighHoleData.value = res.data;
      }
    });
  };
  const timer = ref(null);
  const myTable = ref(null);
  const clearScroll = () => {
    clearInterval(timer.value);
    timer.value = null;
  };
  const createScroll = () => {
    clearScroll();
    // 拿到 table
    const table = myTable.value.layout.table.refs;
    // 拿到可以滚动的元素
    const tableWrapper = table.bodyWrapper.firstElementChild.firstElementChild;

    timer.value = setInterval(() => {
      tableWrapper.scrollTop += 1;
      // 判断是否滚动到底部，如果到底部了置为0（可视高度+距离顶部=整个高度）
      if (tableWrapper.clientHeight + tableWrapper.scrollTop == tableWrapper.scrollHeight) {
        tableWrapper.scrollTop = 0;
      }
    }, 100);
  };
  const bgDistributexAxisData = ref([]);
  const bgDistributeseriesData = ref([]);
  const bgDistributeFn = () => {
    bgDistribute().then((res) => {
      if(res.code === 200 && res.data){
        res.data.forEach((item) => {
          bgDistributexAxisData.value.push(item.region);
          bgDistributeseriesData.value.push({
            value: item.num,
            itemStyle: {
              color: '#78DFFF'
            }
          });
        });
        // initSecondChart();
      }
    });
  };
  // const initSecondChart = () => {
  //   nextTick(() => {
  //     let barChart = echarts.getInstanceByDom(document.getElementById("second-chart"));
  //     if(barChart != null && barChart != "" && barChart != undefined){
  //       barChart.dispose();
  //     }
  //     barChart = echarts.init(document.getElementById('second-chart'));
  //     let option;
  //     option = {
  //       tooltip: {
  //         trigger: 'axis',
  //         confine: true, //限制在图表区域内
  //         // formatter: function (params) {
  //         //   let template = `${params[0].axisValue}<br>`;         
  //         //   for(let i = 0; i < params.length; i++){
  //         //     let item = params[i];
  //         //     template += item.marker + ' ' + item.data.value + ' 次' + '<br>'
  //         //   }  
  //         //   return template  
  //         // },  
  //       },
  //       legend: {},
  //       grid: {
  //         top: '40px',
  //         left: '60px',
  //         right: '80px',
  //         bottom: '40px',
  //       },
  //       dataZoom: [
  //         {
  //           show: false,
  //           type: "inside",
  //           zoomLock: false,
  //         },
  //       ],
  //       xAxis: {
  //         type: 'category',
  //         name: "区域中心",
  //         nameTextStyle: {
  //           fontWeight: "500",
  //           fontSize: "16px",
  //           color: "#FFFFFF",
  //         },
  //         axisLabel: {
  //           // rotate: 60,
  //           color: "#FFFFFF",
  //           fontSize: "16px",
  //         },
  //         data: bgDistributexAxisData.value,
  //       },
  //       yAxis: {
  //         type: 'value',
  //         name: '桥梁数量（座）',
  //         nameTextStyle: {
  //           fontWeight: "500",
  //           fontSize: "16px",
  //           color: "#FFFFFF",
  //         },
  //         axisLabel: {
  //           color: "#FFFFFF",
  //           fontSize: "16px",
  //         },
  //         splitLine: {
  //           show: true,
  //           lineStyle:{
  //             // type:'dashed',
  //             color: 'rgba(255,255,255,0.2)'
  //           }
  //         } 
  //       },
  //       series: [
  //         {
  //           type: 'bar',
  //           barWidth: "15%",
  //           // showBackground: true,
  //           data: bgDistributeseriesData.value
  //         }
  //       ]
  //     };

  //     option && barChart.setOption(option);
  //   });  
  // };

  //船闸信息
  const beijiangData = ref({});
  const lianjiangData = ref({});
  const countDataFn = () => {
    screenMapData().then((res) => {
      if(res.code === 200){
        beijiangData.value = res.data[0].beijiang;
        lianjiangData.value =  res.data[0].lianjiang;
      }
    });
  };
  const newWaterFunctin = () => {
    nextTick(() => {
      newWater().then((res) => {
        if(res.code === 200){
          let xAxisData = [];
          let seriesData = [];
          res.data.forEach((item) => {
            xAxisData.push(item.name);          
            seriesData.push(item.waterLevel);
          });
          let lineChart = echarts.getInstanceByDom(document.getElementById("third-chart"));
          if(lineChart != null && lineChart != "" && lineChart != undefined){
            lineChart.dispose();
          }
          lineChart = echarts.init(document.getElementById('third-chart'));
      
          let option;
          option = {
            tooltip: {
              trigger: 'axis',
              confine: true, //限制在图表区域内
              formatter: function (params) {
                let template = `${params[0].axisValue}<br>`;         
                for(let i = 0; i < params.length; i++){
                  let item = params[i];
                  template += item.marker + '水位值: ' + item.value + 'm' + '<br>'
                }  
                return template  
              },
            },
            grid: {
              top: '40px',
              left: '40px',
              right: '15px',
              bottom: '40px',
            },
            dataZoom: [
              {
                show: false,
                type: "inside",
                // maxValueSpan: 8,
                // startValue: 0,
                // endValue: 6,
                zoomLock: false,
              },
            ],
            xAxis: {
              type: 'category',
              axisLabel: {
                // rotate: 60,
                color: "#FFFFFF",
                fontSize: "16px",
              },            
              data: xAxisData,
            },
            yAxis: {
              type: 'value',
              name: '水位（m）',
              nameTextStyle: {
                fontWeight: "500",
                fontSize: "16px",
                color: "#FFFFFF",
              },
              axisLabel: {
                color: "#FFFFFF",
                fontSize: "16px",
              }, 
              splitLine: {
                show: true,
                lineStyle:{
                  // type:'dashed',
                  color: 'rgba(255,255,255,0.2)'
                }
              } 
            },
            series: [
              {
                data: seriesData,
                type: 'line',
                itemStyle: {
                  color: '#78DFFF'
                },
              }
            ]
          };
          option && lineChart.setOption(option);
        }
      });  
    });
  };
  //过闸船舶货物类型统计分析
  const initPieChart = () => {
    let date = new Date(); 
    let year = date.getFullYear();
    let month = date.getMonth();
    if(month == 0){
      year = year -1;
      month = 12; 
    }
    if(month < 10){
      month = "0" + month;
    }
    nextTick(() => {
      goodsAnalysis("", `${year}-${month}-01`, `${year}-${month}-31`).then((res) => {
        if(res.code === 200){  
          let seriesData = [];    
          let colorData = [
            '#78DFFF','#9AD4EF','#309CFF','#2B679D','#5057FD','#8083D8','#5AF5D5','#A6E7D9','#55FE5C','#9CDB9F',
            '#FFC733','#FFE6A5','#FE762A','#F9B793','#E33F3F','#F48787','#ED44F0','#F5ABF6','#41616A','#ADCDD6',
          ]; 
          res.data.forEach((item,index) => {
            let obj = {
              name: item.cargoType,
              value: item.rate,
              load: item.load,
              itemStyle: { 
                color: colorData[index]
              }
            };
            seriesData.push(obj);
          });
          let pieChart = echarts.getInstanceByDom(document.getElementById("third-chart"));
          if(pieChart != null && pieChart != "" && pieChart != undefined){
            pieChart.dispose();
          }
          pieChart = echarts.init(document.getElementById('third-chart'));
          let option = {            
            graphic: {
              type: 'image',
              id: 'background',
              left: 105,
              top: 23,
              z: -10, // 确保背景图在底层
              bounding: 'raw',
              origin: [200, 200], // 图片的中心位置
              style: {
                image: chartBg, // 背景图片的URL
                width: 285, // 背景图片的宽度
                height: 285, // 背景图片的高度
              }
            },
            legend: {   
              type: 'scroll', 
              textStyle: {
                fontSize: "16px",
                color: "#FFFFFF",
              },    
              pageIconColor: '#FFFFFF', // 翻页按钮的颜色
              pageIconInactiveColor: '#2f4554', // 翻页按钮不激活时（即翻页到头时）的颜色
              pageTextStyle: { // 图例页信息的文字样式
                color: '#FFFFFF'
              },      
            },    
            tooltip: {
              trigger: 'item',
              confine: true, //限制在图表区域内
              formatter: function (params) {
                return params.marker + params.data.name + ': ' + params.data.load + '吨，占比：' + params.data.value + '%'
              },    
            },     
            series: [
              {
                type: 'pie',
                radius: ['60%', '70%'],
                avoidLabelOverlap: false,
                label: {
                  show: false,          
                },
                labelLine: {
                  show: true, //标签连接线
                },  
                data: seriesData
              }
            ],          
          };
          option && pieChart.setOption(option);
        }
      });   
    }); 
  };
  const deformationData = ref([]);
  const deformationAlysFn = () => {
    defAlySmall().then((res) => {
      if(res.code === 200 && res.data.length){
        deformationData.value = res.data;
      }
    });
  };

  //数字航运
  const waterWayCompanyData = ref({});
  const waterWayCompanyFn = () => {
    waterWayCompany().then((res) => {
      if(res.code === 200){
        waterWayCompanyData.value = res.data;
      }
    });
  };
  const waterTransportData = ref({});
  const xAxisData = ref([]);
  const seriesData1 = ref([]);
  const seriesData2 = ref([]);
  const waterTransportFn = () => {
    waterTransport().then((res) => {
      if(res.code === 200){
        waterTransportData.value = res.data;
        let arr1 = [];
        let arr2 = [];
        let arr3 = [];
        let arr4 = [];
        res.data.list.forEach((item) => {
          xAxisData.value.push(item.name);
          arr1.push(item.slkyl);
          arr2.push(item.slkyzzl);
          arr3.push(item.slhyl);
          arr4.push(item.slhyzzl);          
        });
        seriesData1.value = [
          {
            name: '客运量合计',
            type: "bar",
            barWidth: '10%',
            itemStyle: {
              color: '#78DFFF'
            },
            data: arr1,
          },
          {
            name: '旅客周转量',
            type: "line",
            yAxisIndex: 1,
            itemStyle: {
              color: '#FFC733'
            },
            data: arr2,
          },
        ];
        seriesData2.value = [
          {
            name: '货运量合计',
            type: "bar",
            barWidth: '10%',
            itemStyle: {
              color: '#78DFFF'
            },
            data: arr3,
          },
          {
            name: '货物周转量',
            type: "line",
            yAxisIndex: 1,
            itemStyle: {
              color: '#FFC733'
            },
            data: arr4,
          },
        ];
        initSeventhChart();
        initEighthChart();
      }
    });    
  }
  const initSeventhChart = () => {
    nextTick(() => {
      let seventhChart = echarts.getInstanceByDom(document.getElementById("seventh-chart"));
      if(seventhChart != null && seventhChart != "" && seventhChart != undefined){
        seventhChart.dispose();
      }
      seventhChart = echarts.init(document.getElementById('seventh-chart'));
      let option;
      option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
          confine: true, //限制在图表区域内
        },
        legend: {
          textStyle: {
            fontSize: "16px",
            color: "#FFFFFF",
          },
          itemGap: 4,
        },
        grid: {
          left: "5%",
          right: "5%",
          bottom: "5%",
          containLabel: true,
        },
        dataZoom: [
          {
            show: false,
            type: "inside",
            maxValueSpan: 30,
            zoomLock: false,
          },
        ],
        xAxis: [
          {
            type: "category",
            data: xAxisData.value,
            axisPointer: {
              type: "shadow",
            },   
            axisTick: {
              alignWithLabel: true, //控制刻度线是否与刻度标签对齐
              show: false, //是否显示刻度线
            },
            axisLabel: {
              color: "#FFFFFF",
              fontSize: "16px",
            },   
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "客运量合计（万人）",
            nameTextStyle: {
              padding: [0,0,0,40],
              fontWeight: "500",
              fontSize: "16px",
              color: "#FFFFFF",
            },
            axisLabel: {
              color: "#FFFFFF",
              fontSize: "16px",
            },
            splitLine: {
              show: true,
              lineStyle:{
                color: 'rgba(255,255,255,0.2)'
              }
            } 
          },
          {
            type: "value",
            name: "旅客周转量（万人公里）",
            axisLabel: {
              color: "#FFFFFF",
              fontSize: "16px",
            },
            nameTextStyle: {
              padding: [0,20,0,0],
              fontWeight: "500",
              fontSize: "16px",
              color: "#FFFFFF",
            },
            splitLine: {
              show: true,
              lineStyle:{
                color: 'rgba(255,255,255,0.2)'
              }
            } 
          },
        ],
        series: seriesData1.value,
      };
      option && seventhChart.setOption(option);
    });
  };
  const initEighthChart = () => {
    nextTick(() => {
      let eighthChart = echarts.getInstanceByDom(document.getElementById('eighth-chart'));
      if(eighthChart != null && eighthChart != "" && eighthChart != undefined){
        eighthChart.dispose();
      }
      eighthChart = echarts.init(document.getElementById('eighth-chart'));
      let option;
      option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
          confine: true, //限制在图表区域内
        },
        legend: {
          textStyle: {
            fontSize: "16px",
            color: "#FFFFFF",
          },
          itemGap: 4,
        },
        grid: {
          left: "5%",
          right: "5%",
          bottom: "5%",
          containLabel: true,
        },
        dataZoom: [
          {
            show: false,
            type: "inside",
            maxValueSpan: 30,
            zoomLock: false,
          },
        ],
        xAxis: [
          {
            type: "category",
            data: xAxisData.value,
            axisPointer: {
              type: "shadow",
            },   
            axisTick: {
              alignWithLabel: true, //控制刻度线是否与刻度标签对齐
              show: false, //是否显示刻度线
            },
            axisLabel: {
              color: "#FFFFFF",
              fontSize: "16px",
            },   
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "货运量合计（亿吨）",
            nameTextStyle: {
              padding: [0,0,0,40],
              fontWeight: "500",
              fontSize: "16px",
              color: "#FFFFFF",
            },
            axisLabel: {
              color: "#FFFFFF",
              fontSize: "16px",
            },
            splitLine: {
              show: true,
              lineStyle:{
                color: 'rgba(255,255,255,0.2)'
              }
            } 
          },
          {
            type: "value",
            name: "货物周转量（亿吨公里）",
            axisLabel: {
              color: "#FFFFFF",
              fontSize: "16px",
            },
            nameTextStyle: {
              padding: [0,20,0,0],
              fontWeight: "500",
              fontSize: "16px",
              color: "#FFFFFF",
            },
            splitLine: {
              show: true,
              lineStyle:{
                color: 'rgba(255,255,255,0.2)'
              }
            } 
          },
        ],
        series: seriesData2.value,
      };
      option && eighthChart.setOption(option);
    });
  };
  const radio = ref('客运船舶情况');
  const waterCapacityData = ref({});
  const waterCapacityFn = () => {
    waterCapacity().then((res) => {
      if(res.code === 200){
        waterCapacityData.value = res.data;
        initFifthChart();
        initSixthChart();
      }
    });
  };
  const initFifthChart = () => {
    nextTick(() => {
      let barChart = echarts.getInstanceByDom(document.getElementById('fifth-chart'));
      if(barChart != null && barChart != "" && barChart != undefined){
        barChart.dispose();
      }
      barChart = echarts.init(document.getElementById('fifth-chart'));
      let option;
      option = {
        tooltip: {
          trigger: 'axis',
          confine: true, //限制在图表区域内
        },
        legend: {},
        grid: {
          top: '40px',
          left: '60px',
          right: '10px',
          bottom: '40px',
        },
        dataZoom: [
          {
            show: false,
            type: "inside",
            zoomLock: false,
          },
        ],
        xAxis: {
          type: 'category',
          axisLabel: {
            color: "#FFFFFF",
            fontSize: "16px",
          },
          data: waterCapacityData.value.passagerShipName,
        },
        yAxis: {
          type: 'value',
          name: '船舶数量（座）',
          nameTextStyle: {
            fontWeight: "500",
            fontSize: "16px",
            color: "#FFFFFF",
          },
          axisLabel: {
            color: "#FFFFFF",
            fontSize: "16px",
          },
          splitLine: {
            show: true,
            lineStyle:{
              color: 'rgba(255,255,255,0.2)'
            }
          } 
        },
        series: [
          {
            type: 'bar',
            barWidth: '10%',
            itemStyle: {
              color: '#78DFFF'
            },
            data: waterCapacityData.value.passagerShip,
          }
        ]
      };

      option && barChart.setOption(option);
    });  
  };
  const initSixthChart = () => {
    nextTick(() => {
      let barChart = echarts.getInstanceByDom(document.getElementById('sixth-chart'));
      if(barChart != null && barChart != "" && barChart != undefined){
        barChart.dispose();
      }
      barChart = echarts.init(document.getElementById('sixth-chart'));
      let option;
      option = {
        tooltip: {
          trigger: 'axis',
          confine: true, //限制在图表区域内
        },
        legend: {},
        grid: {
          top: '40px',
          left: '60px',
          right: '10px',
          bottom: '40px',
        },
        dataZoom: [
          {
            show: false,
            type: "inside",
            zoomLock: false,
          },
        ],
        xAxis: {
          type: 'category',
          axisLabel: {
            color: "#FFFFFF",
            fontSize: "16px",
          },
          data: waterCapacityData.value.goodsShipName,
        },
        yAxis: {
          type: 'value',
          name: '船舶数量（座）',
          nameTextStyle: {
            fontWeight: "500",
            fontSize: "16px",
            color: "#FFFFFF",
          },
          axisLabel: {
            color: "#FFFFFF",
            fontSize: "16px",
          },
          splitLine: {
            show: true,
            lineStyle:{
              color: 'rgba(255,255,255,0.2)'
            }
          } 
        },
        series: [
          {
            type: 'bar',
            barWidth: '10%',
            itemStyle: {
              color: '#78DFFF'
            },
            data: waterCapacityData.value.goodsShip,
          }
        ]
      };

      option && barChart.setOption(option);
    });  
  };
  //数字港口
  const radio1 = ref('港口企业');
  const seriesData3 = ref([]);
  const seriesData4 = ref([]);
  const portCompanyFn = () => {
    portCompany().then((res) => {
      if(res.code === 200){   
        let colorData = [
          '#78DFFF','#9AD4EF','#309CFF','#2B679D','#5057FD','#8083D8','#5AF5D5','#A6E7D9','#55FE5C','#9CDB9F',
          '#FFC733','#FFE6A5','#FE762A','#F9B793','#E33F3F','#F48787','#ED44F0','#F5ABF6','#41616A','#ADCDD6',
        ]; 
        res.data.type1.forEach((item,index) => {
          seriesData3.value.push({
            value: item,
            name: res.data.type1Name[index],
            itemStyle: { 
              color: colorData[index]
            }
          });
        });    
        res.data.type2.forEach((item,index) => {
          seriesData4.value.push({
            value: item,
            name: res.data.type2Name[index],
            itemStyle: { 
              color: colorData[index]
            }
          });
        });
        initNinthChart();  
        initTenthChart();
      }
    });
  };
  const initNinthChart = () => {
    let pieChart = echarts.getInstanceByDom(document.getElementById("ninth-chart"));
    if(pieChart != null && pieChart != "" && pieChart != undefined){
      pieChart.dispose();
    }
    pieChart = echarts.init(document.getElementById('ninth-chart'));
    let option;
    option = {
      graphic: {
        type: 'image',
        id: 'background',
        left: 28,
        top: 21,
        z: -10, // 确保背景图在底层
        bounding: 'raw',
        origin: [200, 200], // 图片的中心位置
        style: {
          image: chartBg, // 背景图片的URL
          width: 300, // 背景图片的宽度
          height: 300, // 背景图片的高度
        }
      },
      tooltip: {
        trigger: 'item',
        confine: true, //限制在图表区域内
        // formatter: function (params) {
        //   return params.marker + params.data.name + ': ' + params.data.load + '吨，占比：' + params.data.value + '%'
        // },    
      },
      legend: {   
        type: 'scroll', 
        textStyle: {
          fontSize: "16px",
          color: "#FFFFFF",
        },    
        pageIconColor: '#FFFFFF', // 翻页按钮的颜色
        pageIconInactiveColor: '#2f4554', // 翻页按钮不激活时（即翻页到头时）的颜色
        pageTextStyle: { // 图例页信息的文字样式
          color: '#FFFFFF'
        },      
      },          
      series: [
        {
          type: 'pie',
          radius: ['60%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: false,          
          },
          labelLine: {
            show: true, //标签连接线
          },  
          data: seriesData3.value
        }
      ],          
    };
    option && pieChart.setOption(option);
  };
  const initTenthChart = () => {
    let pieChart = echarts.getInstanceByDom(document.getElementById("tenth-chart"));
    if(pieChart != null && pieChart != "" && pieChart != undefined){
      pieChart.dispose();
    }
    pieChart = echarts.init(document.getElementById('tenth-chart'));
    let option;
    option = {
      graphic: {
        type: 'image',
        id: 'background',
        left: 28,
        top: 21,
        z: -10, // 确保背景图在底层
        bounding: 'raw',
        origin: [200, 200], // 图片的中心位置
        style: {
          image: chartBg, // 背景图片的URL
          width: 300, // 背景图片的宽度
          height: 300, // 背景图片的高度
        }
      },
      tooltip: {
        trigger: 'item',
        confine: true, //限制在图表区域内
        // formatter: function (params) {
        //   return params.marker + params.data.name + ': ' + params.data.load + '吨，占比：' + params.data.value + '%'
        // },    
      },
      legend: {   
        type: 'scroll', 
        textStyle: {
          fontSize: "16px",
          color: "#FFFFFF",
        },    
        pageIconColor: '#FFFFFF', // 翻页按钮的颜色
        pageIconInactiveColor: '#2f4554', // 翻页按钮不激活时（即翻页到头时）的颜色
        pageTextStyle: { // 图例页信息的文字样式
          color: '#FFFFFF'
        },      
      },          
      series: [
        {
          type: 'pie',
          radius: ['60%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: false,          
          },
          labelLine: {
            show: true, //标签连接线
          },  
          data: seriesData4.value
        }
      ],          
    };
    option && pieChart.setOption(option);
  };
  const portMachineFn = () => {
    portMachine().then((res) => {
      if(res.code === 200){
        let seriesData = [];
        let colorData = [
          '#78DFFF','#9AD4EF','#309CFF','#2B679D','#5057FD','#8083D8','#5AF5D5','#A6E7D9','#55FE5C','#9CDB9F',
          '#FFC733','#FFE6A5','#FE762A','#F9B793','#E33F3F','#F48787','#ED44F0','#F5ABF6','#41616A','#ADCDD6',
        ]; 
        res.data.list.forEach((item,index) => {
          seriesData.push({
            value: item,
            name: res.data.name[index],
            itemStyle: { 
              color: colorData[index]
            }
          });
        }); 
        nextTick(() => {        
          let pieChart = echarts.getInstanceByDom(document.getElementById("eleventh-chart"));
          if(pieChart != null && pieChart != "" && pieChart != undefined){
            pieChart.dispose();
          }
          pieChart = echarts.init(document.getElementById('eleventh-chart'));
          let option;
          option = {
            graphic: {
              type: 'image',
              id: 'background',
              left: 100,
              top: 20,
              z: -10, // 确保背景图在底层
              bounding: 'raw',
              origin: [200, 200], // 图片的中心位置
              style: {
                image: chartBg, // 背景图片的URL
                width: 300, // 背景图片的宽度
                height: 300, // 背景图片的高度
              }
            },
            tooltip: {
              trigger: 'item',
              confine: true, //限制在图表区域内
              // formatter: function (params) {
              //   return params.marker + params.data.name + ': ' + params.data.load + '吨，占比：' + params.data.value + '%'
              // },    
            },
            legend: {   
              type: 'scroll', 
              textStyle: {
                fontSize: "16px",
                color: "#FFFFFF",
              },    
              pageIconColor: '#FFFFFF', // 翻页按钮的颜色
              pageIconInactiveColor: '#2f4554', // 翻页按钮不激活时（即翻页到头时）的颜色
              pageTextStyle: { // 图例页信息的文字样式
                color: '#FFFFFF'
              },      
            },          
            series: [
              {
                type: 'pie',
                radius: ['60%', '70%'],
                avoidLabelOverlap: false,
                label: {
                  show: false,          
                },
                labelLine: {
                  show: true, //标签连接线
                },  
                data: seriesData
              }
            ],          
          };
          option && pieChart.setOption(option);
        });
      }
    });
  };
  const berthLineData = ref({});
  const berthLineFn = () => {
    berthLine().then((res) => {
      berthLineData.value = res.data;
    });
  };
  const radio2 = ref('货物吞吐情况');
  const goodsSitData = ref({});
  const xAxisData1 = ref([]);
  const xAxisData2 = ref([]);
  const seriesData5 = ref([]);
  const seriesData6 = ref([]);
  const goodsSitFn = () => {
    goodsSit().then((res) => {
      if(res.code === 200){
        goodsSitData.value = res.data;
        res.data.goodsList.forEach((item) => {
          xAxisData1.value.push(item.time);
          seriesData5.value.push(item.throughput);
        });
        res.data.boxList.forEach((item) => {
          xAxisData2.value.push(item.time);
          seriesData6.value.push(item.throughput);
        });
        initTwelfthChart();
        initThirteenthChart();
      }
    });
  };
  const initTwelfthChart = () => {
    nextTick(() => {
      let lineChart = echarts.getInstanceByDom(document.getElementById("twelfth-chart"));
      if(lineChart != null && lineChart != "" && lineChart != undefined){
        lineChart.dispose();
      }
      lineChart = echarts.init(document.getElementById('twelfth-chart'));
  
      let option;
      option = {
        tooltip: {
          trigger: 'axis',
          confine: true, //限制在图表区域内
          // formatter: function (params) {
          //   let template = `${params[0].axisValue}<br>`;         
          //   for(let i = 0; i < params.length; i++){
          //     let item = params[i];
          //     template += item.marker + '水位值: ' + item.value + 'm' + '<br>'
          //   }  
          //   return template  
          // },
        },
        grid: {
          top: '50px',
          left: '80px',
          right: '15px',
          bottom: '40px',
        },
        dataZoom: [
          {
            show: false,
            type: "inside",
            zoomLock: false,
          },
        ],
        xAxis: {
          type: 'category',
          axisLabel: {
            color: "#FFFFFF",
            fontSize: "16px",
          },            
          data: xAxisData1.value,
        },
        yAxis: {
          type: 'value',
          name: '单位（万吨）',
          nameTextStyle: {
            fontWeight: "500",
            fontSize: "16px",
            color: "#FFFFFF",
          },
          axisLabel: {
            color: "#FFFFFF",
            fontSize: "16px",
          }, 
          splitLine: {
            show: true,
            lineStyle:{
              color: 'rgba(255,255,255,0.2)'
            }
          } 
        },
        series: [
          {
            data: seriesData5.value,
            type: 'line',
            itemStyle: {
              color: '#78DFFF'
            },
          }
        ]
      };
      option && lineChart.setOption(option);
    });      
  };
  const initThirteenthChart = () => {
    nextTick(() => {
      let lineChart = echarts.getInstanceByDom(document.getElementById("thirteenth-chart"));
      if(lineChart != null && lineChart != "" && lineChart != undefined){
        lineChart.dispose();
      }
      lineChart = echarts.init(document.getElementById('thirteenth-chart'));
  
      let option;
      option = {
        tooltip: {
          trigger: 'axis',
          confine: true, //限制在图表区域内
          // formatter: function (params) {
          //   let template = `${params[0].axisValue}<br>`;         
          //   for(let i = 0; i < params.length; i++){
          //     let item = params[i];
          //     template += item.marker + '水位值: ' + item.value + 'm' + '<br>'
          //   }  
          //   return template  
          // },
        },
        grid: {
          top: '50px',
          left: '80px',
          right: '15px',
          bottom: '40px',
        },
        dataZoom: [
          {
            show: false,
            type: "inside",
            zoomLock: false,
          },
        ],
        xAxis: {
          type: 'category',
          axisLabel: {
            color: "#FFFFFF",
            fontSize: "16px",
          },            
          data: xAxisData2.value,
        },
        yAxis: {
          type: 'value',
          name: '单位（万吨）',
          nameTextStyle: {
            fontWeight: "500",
            fontSize: "16px",
            color: "#FFFFFF",
          },
          axisLabel: {
            color: "#FFFFFF",
            fontSize: "16px",
          }, 
          splitLine: {
            show: true,
            lineStyle:{
              color: 'rgba(255,255,255,0.2)'
            }
          } 
        },
        series: [
          {
            data: seriesData6.value,
            type: 'line',
            itemStyle: {
              color: '#78DFFF'
            },
          }
        ]
      };
      option && lineChart.setOption(option);
    });      
  };

  //图例
  const isShowLegend = ref(false); 
  const isShowFilter = ref(false);  
  const qiaoliang = ref(false);
  const chuanzha = ref(false);
  const gangkou = ref(false);
  const ais = ref(false);
  const handleFilter = () => {    
    OlArcRef.value.filterFn(qiaoliang.value,chuanzha.value,gangkou.value,ais.value);
  };
  //区域中心
  const checkAll1 = ref(false);
  const isIndeterminate1 = ref(false);
  const checkedValues1 = ref([]);
  const options1 = ["东江", "西江", "北江", "粤东", "粤西", "佛山", "广州", "南沙", "江门", "深圳", "珠海", "梅州", "东莞", "中山", "韶关", "阳江"];
  const handleCheckAllChange1 = (val) => {
    checkedValues1.value = val ? options1 : [];
    isIndeterminate1.value = false;
    handleAddLayer();
  };
  const handleCheckedChange1 = (value) => {
    const checkedCount = value.length;
    checkAll1.value = checkedCount === options1.length;
    isIndeterminate1.value = checkedCount > 0 && checkedCount < options1.length;
    handleAddLayer();
  };
  //流域
  const checkAll2 = ref(false);
  const isIndeterminate2 = ref(false);
  const checkedValues2 = ref([]);
  const options2 = ['北江','韩江','西江','东江'];
  const handleCheckAllChange2 = (val) => {
    checkedValues2.value = val ? options2 : [];
    isIndeterminate2.value = false;
    handleAddLayer();
  };
  const handleCheckedChange2 = (value) => {
    const checkedCount = value.length;
    checkAll2.value = checkedCount === options2.length;
    isIndeterminate2.value = checkedCount > 0 && checkedCount < options2.length;
    handleAddLayer();
  };
  //等级航道
  const checkAll3 = ref(false);
  const isIndeterminate3 = ref(false);
  const checkedValues3 = ref([]);
  const options3 = ['一级航道','二级航道','三级航道','四至七级航道'];
  const handleCheckAllChange3 = (val) => {
    checkedValues3.value = val ? options3 : [];
    isIndeterminate3.value = false;
    handleAddLayer();
  };
  const handleCheckedChange3 = (value) => {
    const checkedCount = value.length;
    checkAll3.value = checkedCount === options3.length;
    isIndeterminate3.value = checkedCount > 0 && checkedCount < options3.length;
    handleAddLayer();
  };
  const handleAddLayer = () => {
    OlArcRef.value.addLayerFn({
      quyuzhongxin: checkedValues1.value,
      liuyu: checkedValues2.value,
      dengjihangdao: checkedValues3.value
    });
  };

  //是否显示iframe
  const isShow = ref(false);

  onMounted(() => {
    //通航信息
    getProvinceWaterwayDataFn();
    provinceSitFn();
    getWaterwayTotalNumFn();
    getnhdjhdDetailFn();
    //航标总数
    beaconSituationDetailFn();
    rtuBeaconChartFn();
    //船舶概览
    shipSitFn();
    //桥梁信息
    getBgAndWyFn();
    bgDbDistributeFn();
    getDepartFn();
    createScroll();
    // bgDistributeFn();
    //船闸信息
    countDataFn();
    // newWaterFunctin();
    initPieChart();
    deformationAlysFn();
    //数字航运
    waterWayCompanyFn();
    waterTransportFn();
    waterCapacityFn();
    //数字港口
    portCompanyFn();
    portMachineFn();
    berthLineFn();
    goodsSitFn();
  });

  onUnmounted(() => {
	  clearScroll();
  });

</script>

<style lang="scss" scoped>
  @font-face{
    font-family: Din;
    src: url("../assets/fonts/din.ttf");
  }
  @font-face{
    font-family: Tx;
    src: url("../assets/fonts/tx.ttf");
  }
  .container{
    width: 6600px;
    height: 1200px;
    transform-origin: 0 0;
    position: relative;
    background: #012138;
    .main{
      width: 100%;
      height: 100%;
      display: flex;
      box-sizing: content-box;
      .left-content{
        width: 2200px;
        .item-content{   
          height: 1080px;              
          box-sizing: content-box;
          background-color: #06324f;
          .item-title{
            background-image:url('../assets/images/big-screen/one-title-bg.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
            font-family: 'Tx';
            color: #fff;
            font-size: 26px;
            font-weight: 400;
            height: 40px;
            line-height: 40px;
            padding: 8px 0px 8px 28px;
            display: flex;
            align-items: center;
            justify-content: space-between;
          }
          .flex{
            display: flex;
            flex-wrap: wrap;
            box-sizing: content-box;
            .item{
              width: 49%;
              height: 500px;
              box-sizing: content-box;
              .top{
                background-image:url('../assets/images/big-screen/two-title-bg.png');
                background-size: 100% 100%;
                background-repeat: no-repeat;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 5px 0px;
                margin-bottom: 8px;
                .title{
                  font-family: 'Tx';
                  font-size: 24px;
                  color: #fff;
                  padding-left: 32px;
                }   
              }
              .top1{
                background-image:url('../assets/images/big-screen/three-title-bg.png');
                background-size: 100% 100%;
                background-repeat: no-repeat;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 5px 0px;
                margin-bottom: 8px;
                .title{
                  font-family: 'Tx';
                  font-size: 24px;
                  color: #fff;
                  padding-left: 32px;
                }   
              }
              .first-part{
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                .count-item{     
                  width: 33.33%;                              
                  .name{
                    font-weight: 500;
                    font-size: 18px;
                    color: #FFFFFF;
                  }
                  .value{
                    font-family: 'Din';
                    font-weight: bold;
                    font-size: 32px;
                    color: #FFFFFF;
                  }
                }
                .other-count-item{
                  width: 20%;
                  .name{
                    font-weight: 500;
                    font-size: 16px;
                    color: #FFFFFF;
                  }
                  .value{
                    font-family: 'Din';
                    font-weight: bold;
                    font-size: 28px;
                    color: #FFFFFF;
                  }
                }
              }
              .second-part{
                .sub-title{
                  font-weight: 500;
                  font-size: 22px;
                  color: #FFFFFF;
                  border-bottom: 1px solid rgba(120,223,255,0.5);
                  padding: 8px 0px 6px 0px;
                  margin-bottom: 8px;
                }
                .list{
                  height: 320px;
                  overflow-y: scroll;  
                  box-sizing: content-box; 
                  margin-top: 10px;         
                  .list-item{
                    .item-tit{
                      font-weight: 800;
                      font-size: 16px;
                      color: #78DFFF;
                      background: #164966;
                      text-align: center;
                      padding: 2px 0;
                    }
                    .item-name{
                      display: flex;
                      div{
                        width: 25%;
                        padding: 2px 0;
                        font-weight: 500;
                        font-size: 14px;
                        color: #FFFFFF;
                        background: #225a78;
                        text-align: center;
                      }
                    }
                    .item-value{
                      display: flex;
                      div{
                        width: 25%;
                        padding: 2px 0;
                        font-weight: 400;
                        font-size: 14px;
                        color: #FFFFFF;
                        background: #10405d;
                        text-align: center;
                      }
                    }
                  }
                }
                .tips{
                  display: flex;
                  justify-content: space-between;
                  margin-bottom: 8px;
                  .tips-item{
                    font-weight: 400;
                    font-size: 15px;
                    color: #FFFFFF;
                    display: flex;
                    align-items: center;                    
                    .first-color{
                      width: 8px;
                      height: 8px;
                      background-color: #78DFFF;
                      padding-right: 2px;
                    }
                    .second-color{
                      width: 8px;
                      height: 8px;
                      background-color: #FFC733;
                      padding-right: 2px;
                    }
                  }
                }
                .progress-list{
                  height: 268px;
                  overflow-y: auto;
                  .progress-item{
                    margin-bottom: 8px;
                    .name{
                      font-weight: 400;
                      font-size: 14px;
                      color: #FFFFFF;
                    }
                  }
                }
              }
              .third-part{
                display: flex;
                .another-count{
                  width: 50%;
                  display: flex;
                  align-items: center;
                  background-image:url('../assets/images/big-screen/bg.png');
                  background-size: 100% 100%;
                  background-repeat: no-repeat;
                  padding: 12px 20px;
                  .another-count-item{
                    .img{
                      width: 48px;
                      height: 48px;
                      img{
                        width: 100%;
                        height: 100%;
                      }
                    }
                    .name{
                      font-weight: 500;
                      font-size: 18px;
                      color: #FFFFFF;
                    }
                    .value{
                      font-weight: bold;
                      font-size: 32px;
                      color: #FFFFFF;
                    }
                  }
                }
              }
              .radio-content{
                .ship-count{
                  display: flex;
                  .ship-count-item{
                    width: 50%;
                    text-align: center;
                    background-image:url('../assets/images/big-screen/bg.png');
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                    padding: 4px 0;
                    .name{
                      font-weight: 500;
                      font-size: 16px;
                      color: #FFFFFF;
                    }
                    .value{
                      font-family: 'Din';
                      font-weight: bold;
                      font-size: 28px;
                      color: #FFFFFF;
                    }
                  }
                }
                .select-radio{
                  text-align: center;
                  margin: 16px 0px 22px 0px;
                }
              }
            }
          } 
        }
      }
      .middle-content{
        width: 2200px;     
        height: 1080px;    
        margin: 40px 0px;
        position: relative; 
        .special-topic{
          position: absolute;
          top: 42px;
          left: 10px; 
          font-family: 'Tx';
          font-weight: 400;
          font-size: 18px;
          color: #FFFFFF;
          .topic{
            width: 286px;
            height: 40px;
            background-image:url('../assets/images/big-screen/topic-bg.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 24px;
            color: rgba(255,255,255,0.65);
          }
          .topic:hover{
            width: 286px;
            height: 40px;
            background-image:url('../assets/images/big-screen/topic-active-bg.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 24px;
          }
          .topic-active{
            width: 286px;
            height: 40px;
            background-image:url('../assets/images/big-screen/topic-active-bg.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 24px;
          }
        }
        .legend{
          width: 216px;
          background: rgba(5,48,68,0.8);
          border: 1px solid rgba(120,223,255,0.4);
          position: absolute;
          top: 42px;
          right: 318px;
          .legend-title{
            font-weight: 500;
            font-size: 20px;
            color: #FFFFFF;
            background: rgba(4,35,54,0.8);
            border-bottom: 1px solid rgba(120,223,255,0.4);
            padding: 8px 0px 8px 24px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            img{
              padding-right: 24px;
            }
          }
          .legend-info{
            padding: 16px 0px 16px 24px;
            .legend-item{
              display: flex;
              // align-items: center;
              font-weight: 400;
              font-size: 18px;
              color: #FFFFFF;
              .name{
                padding-left: 4px;
              }
            } 
          }          
        }
        .filter{
          width: 288px;
          background: rgba(5,48,68,0.8);
          border: 1px solid rgba(120,223,255,0.4);
          position: absolute;
          top: 42px;
          right: 10px;
          .filter-title{
            font-weight: 500;
            font-size: 20px;
            color: #FFFFFF;
            background: rgba(4,35,54,0.8);
            border-bottom: 1px solid rgba(120,223,255,0.4);
            padding: 8px 0px 8px 24px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            img{
              padding-right: 24px;
            }
          }
          .filter-item{
            margin: 10px 24px;
            .name{
              color: #78DFFF;
              font-size: 16px;
              font-weight: bold;
            }
          }
        }      
      }
      .right-content{
        width: 2200px; 
        .item-content{              
          box-sizing: content-box;
          background-color: #06324f;
          .item-title{
            background-image:url('../assets/images/big-screen/one-title-bg.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
            font-family: 'Tx';
            color: #fff;
            font-size: 26px;
            font-weight: 400;
            height: 40px;
            line-height: 40px;
            padding: 8px 0px 8px 28px;
            display: flex;
            align-items: center;
            justify-content: space-between;
          }
          .flex{
            display: flex;
            box-sizing: content-box;
            .item{
              box-sizing: content-box;
              .top{
                background-image:url('../assets/images/big-screen/two-title-bg.png');
                background-size: 100% 100%;
                background-repeat: no-repeat;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 5px 0px;
                // margin-bottom: 24px;
                .tit{
                  font-family: 'Tx';
                  font-size: 24px;
                  color: #fff;
                  padding-left: 32px;
                }   
              }
              .top1{
                background-image:url('../assets/images/big-screen/three-title-bg.png');
                background-size: 100% 100%;
                background-repeat: no-repeat;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 5px 0px;
                // margin-bottom: 24px;
                .tit{
                  font-family: 'Tx';
                  font-size: 24px;
                  color: #fff;
                  padding-left: 32px;
                }   
              }
              .count-one{
                display: flex;
                .left-part{
                  width: 30%;
                  text-align: center;
                  margin: 24px 0;
                  .name{
                    font-weight: 600;
                    font-size: 18px;
                    color: #78DFFF;
                  }
                  .value{
                    font-family: Din;
                    font-weight: bold;
                    font-size: 32px;
                    color: #FFFFFF;
                  }
                  .base-bg{
                    margin-top: -24px;
                  }
                }
                .right-part{
                  width: 70%;
                  display: flex;
                  flex-wrap: wrap;
                  margin: 8px 0;
                  .right-part-item{
                    width: 33.3%;
                    .val1{
                      font-weight: 500;
                      font-size: 14px;
                      color: #FFFFFF;
                    }
                    .val2{
                      font-family: Din;
                      font-weight: bold;
                      font-size: 28px;
                      color: #FFFFFF;
                    }
                    .val3{
                      font-weight: 400;
                      font-size: 14px;
                      color: #28CE8E;
                      display: flex;
                      align-items: center;
                      img{
                        width: 14px;
                        height: 14px;
                        padding-top: 4px;
                      }
                    }
                  }
                }
              }
              .count-two{
                display: flex;
                .count-two-part{
                  width: 50%;
                  margin-right: 20px;
                  .title{
                    font-weight: 500;
                    font-size: 22px;
                    color: #FFFFFF;
                    border-bottom: 1px solid rgba(120,223,255,0.5);
                    padding: 8px 0px 6px 0px;
                  }
                  .count-two-list{
                    display: flex;
                    margin: 20px 0;
                    .count-two-item{                      
                      display: flex;
                      .img-part{
                        width: 30%;
                        margin-right: 16px;
                      }
                      .count-part{
                        width: 70%;
                        .val1{
                          font-weight: 500;
                          font-size: 14px;
                          color: #FFFFFF;
                        }
                        .val2{
                          font-family: Din;
                          font-weight: bold;
                          font-size: 28px;
                          color: #FFFFFF;
                        }
                        .val3{
                          font-weight: 400;
                          font-size: 14px;
                          color: #F86220;
                          display: flex;
                          align-items: center;
                          img{
                            width: 14px;
                            height: 14px;
                            padding-top: 4px;
                          }
                        }
                      }
                    }
                  }
                }
                .right-part{
                  width: 50%;
                  .title{
                    font-weight: 500;
                    font-size: 22px;
                    color: #FFFFFF;
                    border-bottom: 1px solid rgba(120,223,255,0.5);
                    padding: 8px 0px 6px 0px;
                  }
                }
              }
              .tabs-content{
                .info-item{
                  height: 150px;
                  background-image:url('../assets/images/big-screen/bg.png');
                  background-size: 100% 100%;
                  background-repeat: no-repeat;
                  display: flex;
                  .left-info{
                    margin: 16px 20px 16px 40px;
                    text-align: center;
                    .name{
                      font-weight: 600;
                      font-size: 20px;
                      color: #78DFFF;
                    }
                    .value{
                      font-family: Din;
                      font-weight: bold;
                      font-size: 36px;
                      color: #FFFFFF;
                    }
                    img{
                      margin-top: -50px;
                    }
                  }
                  .raight-info{
                    display: flex;
                    margin-top: 28px;
                    .val-item{
                      margin-right: 30px;
                      .val1{
                        font-weight: 500;
                        font-size: 18px;
                        color: #FFFFFF;
                        margin-bottom: 4px;
                      }
                      .val2{
                        font-family: Din;
                        font-weight: bold;
                        font-size: 32px;
                        color: #FFFFFF;
                      }
                    }
                  }
                  .left-info1{
                    margin: 28px 16px 28px 40px;
                  }
                  .raight-info1{
                    margin-top: 17px;
                    .name{
                      font-weight: 500;
                      font-size: 20px;
                      color: #FFFFFF;
                    }
                    .value{
                      font-family: Din;
                      font-weight: bold;
                      font-size: 46px;
                      color: #FFFFFF;
                    }
                  }
                }
              }
              .count-three{
                display: flex;
                .count-three-part{                  
                  margin-right: 20px;
                  .title{
                    font-weight: 500;
                    font-size: 22px;
                    color: #FFFFFF;
                    border-bottom: 1px solid rgba(120,223,255,0.5);
                    padding: 8px 0px 6px 0px;
                  }
                  .count-three-info{
                    display: flex;
                    .left-info{
                      width: 40%;
                      text-align: center;
                      margin: 70px 0;
                      .value{
                        font-family: 'Din';
                        font-weight: bold;
                        font-size: 40px;
                        color: #FFFFFF;
                      }
                      .unit{
                        font-weight: 400;
                        font-size: 18px;
                        color: #FFFFFF;
                      }
                      img{
                        margin-top: -45px;
                      }
                      .name{
                        font-weight: 500;
                        font-size: 18px;
                        color: #FFFFFF;
                      }
                    }
                    .right-info{
                      width: 60%;
                      display: flex;
                      flex-wrap: wrap;
                      margin: 50px 0px 0px 26px;
                      .val-item{
                        width: 50%;
                        .name{
                          font-weight: 500;
                          font-size: 16px;
                          color: #FFFFFF;
                        }
                        .value{
                          font-weight: bold;
                          font-size: 28px;
                          color: #FFFFFF;
                        }
                      }
                    }
                    .right-info1{
                      width: 60%;
                      margin: 65px 0px 0px 40px;
                      .val-item{
                        margin-bottom: 28px;
                        .name{
                          font-weight: 500;
                          font-size: 16px;
                          color: #FFFFFF;
                          margin-bottom: 8px;
                        }
                        .value{
                          font-weight: bold;
                          font-size: 28px;
                          color: #FFFFFF;
                        }
                      }
                    }
                  }
                }
              }
              .details{
                display: flex;
                align-items: center;
                margin: 14px 0px 9px 0px;
                .val1{
                  font-weight: 500;
                  font-size: 16px;
                  color: #FFFFFF;
                  margin-right: 8px;
                }
                .val2{
                  font-family: 'Din';
                  font-weight: bold;
                  font-size: 28px;
                  color: #FFFFFF;
                  margin-right: 8px;
                }
                .val3{
                  font-weight: 400;
                  font-size: 14px;
                  color: #28CE8E;
                  display: flex;
                  align-items: center;
                  img{
                    width: 14px;
                    height: 14px;
                    padding-top: 4px;
                  }
                }
              }
            }
          }
        }
      }
    }    
    .my-iframe{
      .close-btn{
        font-family: 'Tx';
        position: absolute;
        top: 40px;
        left: 1940px;
        color: #FFFFFF;
        font-size: 20px;
        background-image:url('../assets/images/big-screen/back-bg.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        width: 236px;
        height: 44px;
        line-height: 44px;
        text-align: center;
      }
    }
  }
  // 表单样式
  :deep(.el-form-item__label){
    color: #06283e;
  }
  :deep(.el-input__inner){
    color: #78DFFF;
    background: transparent;
  }
  :deep(.el-input__wrapper){
    background-color: transparent;
    box-shadow: 0 0 0 1px #06283e inset;
  }
  :deep(.el-range-editor--small .el-range-separator){
    color: #78DFFF;
  }
  :deep(.el-input__inner::placeholder){
    color: #78DFFF;
  }
  :deep(.el-select .el-input .el-select__caret.el-icon){
    color: #78DFFF;
  }
  :deep(.el-date-editor .el-range__icon){
    color: #78DFFF;
  }
  :deep(.el-range-input::placeholder){
    color: #78DFFF;
  }
  :deep(.el-range-editor--small .el-range-input){
    color: #78DFFF;
  }
  :deep(.el-cascader .el-input .el-input__suffix-inner .el-icon svg){
    color: #78DFFF;
  }
  :deep(.el-radio-button__inner){
    color: #fff;
    background: transparent;
    border: 1px solid #D9D9D9;
  }
  :deep(.el-radio-button__original-radio:checked+.el-radio-button__inner){
    color: #262626;    
    background-color: #78DFFF;
    border: 1px solid #78DFFF;
  }
  :deep(.el-checkbox){
    font-weight: 400;
    --el-checkbox-font-size: 18px;
    // color: rgba(255,255,255,0.65);
    color: #fff;
  }
  :deep(.el-checkbox__inner){
    background-color: #D8D8D8;
  }
  :deep(.el-checkbox__input.is-checked+.el-checkbox__label){
    color: #78DFFF;
  }
  :deep(.el-checkbox__input.is-indeterminate .el-checkbox__inner){
    background-color: #78DFFF;
    border-color: #78DFFF;
  }
  :deep(.el-checkbox__input.is-checked .el-checkbox__inner){
    background-color: #78DFFF;
    border-color: #78DFFF;
  }
  :deep(.el-checkbox__inner::after){    
    box-sizing: content-box;
    content: "";
    border: 1px solid black;
    border-left: 0;
    border-top: 0;
    height: 7px;
    left: 4px;
    position: absolute;
    top: 1px;
    transform: rotate(45deg) scaleY(0);
    width: 3px;
    transition: transform .15s ease-in 50ms;
    transform-origin: center;
  }
  :deep(.el-checkbox__input.is-indeterminate .el-checkbox__inner::before){
    content: "";
    position: absolute;
    display: block;
    background-color: black;
    height: 2px;
    transform: scale(.5);
    left: 0;
    right: 0;
    top: 5px;
  }
  :deep(.el-date-editor .el-range__icon){
    display: none;
  }
  :deep(.el-input.is-disabled .el-input__wrapper){
    background-color: transparent;
    box-shadow: 0 0 0 1px #06283e inset;
  }
  :deep(.el-input.is-disabled .el-input__inner){
    -webkit-text-fill-color: #78DFFF;
  }
  :deep(.el-date-editor .el-range-input){
    color: #78DFFF;
  }
  :deep(.el-date-editor .el-range-separator){
    color: #78DFFF;
  }
  :deep(.el-input__prefix){
    display: none;
  }
  //滚动条样式
  ::-webkit-scrollbar{
    width: 0px!important;
  }
  // 表格样式
  :deep(.el-table),
  :deep(.el-table__expanded-cell) {
    background-color: transparent;
    color: #fff;
  }
  :deep(.el-table th){
    background: rgba(1,128,240,0.1);
    text-align: center;
  }
  :deep(.el-table tr),
  :deep(.el-table td) {
    background-color: transparent;
    border: 0px;
    color: #fff;
    font-size: 14px;
    font-weight: Normal;
    padding: 4px 0;
    text-align: center;
  }
  // 修改高亮当前行颜色
  :deep(.el-table tbody tr:hover > td) {
    background: #063570 !important;
  } 
  //去掉最下面的那一条线 
  .el-table::before {
    height: 0px;
  }
  :deep(.el-table__inner-wrapper::before){
    background-color: transparent;
  } 
  //去掉表头下面的那一条线
  :deep(.el-table th.el-table__cell.is-leaf){
    border-bottom: 0;
  }
  :deep(.el-progress__text){
    color: #FFFFFF;
  }
</style>